<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button text="返回"></ion-back-button>
    </ion-buttons>
    <ion-title>个人中心</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div>
    <ion-card-content>
      <ion-row style="border-bottom:1px solid #ccc;">
        <ion-col size="4">
          <ion-avatar style="width:90%;height:80%">
            <img  src="assets/icon/avatar.jpg/">
          </ion-avatar>
        </ion-col>
        <ion-col size="8">
          <div >
            <span class="ion-padding-end">昵称<span style="color:#3dc2ff"> 月牙湾</span></span>
            <span >性别<span style="color:#3dc2ff"> 男</span></span>
          </div>

          <div class="ion-margin-top">
            <span class="ion-padding-end">年龄<span style="color:#3dc2ff"> 18岁</span></span>
            <span>爱好<span style="color:#3dc2ff"> 羽毛球</span></span>
          </div>

          <div class="ion-margin-vertical">
            <h3>
              <ion-icon name="card-outline"></ion-icon> 积分 <span style="color:#3dc2ff"> 2000币</span>
            </h3>
          </div>
        </ion-col>
      </ion-row>

      <ion-card-content style="text-align: center;margin-bottom:100px; padding-left: 0px;">
        <ion-list lines="none">
          <ion-item (click)="presentFeedbackPrompt()">
            <ion-icon name="person-outline" color="primary" class="ion-margin-end"></ion-icon>
            <ion-label > 意见反馈</ion-label> 
          </ion-item>
          <ion-item (click)="getVersion()">
            <ion-icon name="camera-reverse-outline" color="primary" class="ion-margin-end"></ion-icon>
            <ion-label> 版本更新</ion-label> 
          </ion-item>
          <ion-item (click)="presentChangePasswordPrompt()">
            <ion-icon name="create-outline" color="primary" class="ion-margin-end"></ion-icon> 
            <ion-label> 密码修改</ion-label>
          </ion-item>          
        </ion-list>
        <ion-button color="primary" expand="block" style="margin-top:30px; padding:0 10px;" (click)="logout()">退 出 登 录</ion-button>
      </ion-card-content>
    </ion-card-content>
  </div>
</ion-content>